{include file=header.html}
<link type="text/css" href="{res file=css/mapstore.css}" rel="stylesheet" />
<script type="text/javascript" src="http://api.map.baidu.com/api?v=2.0&ak={$baidu_ak}"></script>
<script type="text/javascript" src="{res file=js/mapstore.js}" charset="utf-8"></script> 
<style>
    #mapstore_store{height:600px;}
    #store_scope .right{padding:0;}
</style>

<div id="store_scope">
    <div class="w mb20 mt10 clearfix">
        <div class="left">
            <div class="module">
                <div class="mt">类别</div>
                <!--{foreach from=$scategorys item=scategory name=fe_scategory}-->
                <div class="newitem <!--{if $top_id eq $scategory.id}-->hover<!--{/if}-->">
                    <h3>
                        <b></b>
                        <a href="{url app=mapstore&act=store&cate_id=$scategory.id}" >{$scategory.value|escape}</a>
                    </h3>
                    <ul>
                        <!--{if $scategory.children}-->
                        <!--{foreach from=$scategory.children item=child}-->
                        <li><a href="{url app=mapstore&act=store&cate_id=$child.id}" >{$child.value|escape}</a></li>
                        <!-- {/foreach} -->
                        <!--{else}-->
                        <li><a href="javascript:void(0)">暂无子分类</a></li>
                        <!--{/if}-->
                    </ul>
                </div>
                <!-- {/foreach} -->
            </div>
        </div>
        <div class="right">
            <div id="mapstore_store"></div>
        </div>
    </div>
</div>
        

        



        <script>
            var pinLng = {$lng};
                    var pinLat = {$lat};

            map = new BMap.Map("mapstore_store", {enableMapClick: false});//去掉默认 百度地图的标示
//            map = new BMap.Map("g_index_map");
            map.enableScrollWheelZoom();
            map.enableContinuousZoom();

            var point = new BMap.Point(pinLng, pinLat);
            var myIcon = new BMap.Icon("{res file=images/mapstore_3.png}", new BMap.Size(60, 60));
            marker = new BMap.Marker(point, {icon: myIcon});
            map.addOverlay(marker);
            map.centerAndZoom(point, 16);
            map.addControl(new BMap.NavigationControl());

            marker.setAnimation(BMAP_ANIMATION_BOUNCE);
            map.addEventListener("zoomend", zoomend);


            $.ajax({
                url: 'index.php?app=mapstore&act=ajax_get_stores_list_by_position',
                data: 'cate_id=' + {$cate_id},
                dataType: "json",
                success: function (data) {
                    if (data.done) {
                        if (data.retval.length > 0)
                        {
                            var stores = data.retval;
                            for (i = 0; i < stores.length; i++)
                            {
                                complexOverLay(stores[i]);
                            }
                        }
                    }
                    else
                    {
                        alert(data.msg);
                    }

                }
            });



            //添加覆盖物
            function complexOverLay(data) {

                function ComplexCustomOverlay(point) {
                    this._point = point;
                }
                ComplexCustomOverlay.prototype = new BMap.Overlay();
                ComplexCustomOverlay.prototype.initialize = function (map) {
                    this._map = map;
                    var div = this._div = document.createElement("div");

                    div.style.position = "absolute";
                    div.style.zIndex = BMap.Overlay.getZIndex(this._point.lat);
                    div.style.backgroundColor = "white";
                    div.style.border = "1px solid #dddddd";
                    div.style.color = "#666666";
                    div.style.width = "160px";
                    div.style.borderRadius = "6px";
                    div.style.padding = "2px";
                    div.style.boxShadow = "0 1px 6px rgba(0,0,0,0.35)";
                    div.style.lineHeight = "16px";
                    var aLink = this._aLink = document.createElement("a");



                    aLink.style.display = "block";
                    aLink.style.width = '100%';
                    aLink.style.lineHeight = '25px';
                    aLink.style.height = '25px';
                    aLink.style.borderRadius = '5px';
                    aLink.style.textAlign = 'center';
                    aLink.style.fontSize = '11pt';
                    aLink.style.background = '#92C424';
                    aLink.style.margin = '0';
                    aLink.style.color = '#ffffff';

                    aLink.innerHTML = data.store_name;

                    aLink.style.textDecoration = "none";
                    aLink.target = "_blank";
                    aLink.href = "index.php?app=store&id=" + data.store_id;

                    div.appendChild(aLink);
                    // div.style.whiteSpace = "nowrap";
                    div.style.MozUserSelect = "none";
                    div.style.fontSize = "12px"

                    var arrow = this._arrow = document.createElement("div");
                    arrow.style.background = "url({res file=images/mapstore_toolsub.png})";
                    arrow.style.position = "absolute";
                    arrow.style.width = "30px";
                    arrow.style.height = "18px";
                    arrow.style.bottom = "-18px";
                    arrow.style.left = "65px";

                    div.appendChild(arrow);

                    map.getPanes().labelPane.appendChild(div);
                    return div;
                }
                ComplexCustomOverlay.prototype.draw = function () {
                    var map = this._map;
                    var pixel = map.pointToOverlayPixel(this._point);
                    this._div.style.left = pixel.x - parseInt(this._arrow.style.left) - 12 + "px";
                    this._div.style.top = pixel.y - 46 + "px";
                }
                myCompOverlay = new ComplexCustomOverlay(new BMap.Point(data.lng, data.lat));
                map.addOverlay(myCompOverlay);
            }
            //点击地图移动PIN

            var _chk = true;//为了避免重复点击事件图层覆盖
            function zoomend() {

                if (!_chk) {
                    return false;
                }
                _chk = false;

                $.ajax({
                    url: 'index.php?app=mapstore&act=ajax_get_stores_list_by_position',
                    data: 'cate_id=' + {$cate_id},
                    dataType: "json",
                    success: function (data) {
                        if (data.done) {
                            if (data.retval.length > 0)
                            {
                                var stores = data.retval;
                                for (i = 0; i < stores.length; i++)
                                {
                                    complexOverLay(stores[i]);
                                }
                            }
                        }
                        else
                        {
                            alert(data.msg);
                        }

                    }
                });
            }

        </script>
{include file=footer.html}